import React, { Component } from 'react';
import { Tabs, Table, Select, message, Button } from 'antd';
import { stampToDate } from '../../../utils/index';
import './finance.css';

const TabPane = Tabs.TabPane;
const Option = Select.Option;

class Finance extends Component {
  constructor(props) {
    super(props);
    this.state = {
      symbol: '全部',
      coinList: [],

      currentTab: 'recharge',

      rechargeList: null,
      rechargeTotal: 0,

      withdrawList: null,
      withdrawPage: 1,
      withdrawTotal: 0,
      expendKey: '',

      transferList: null,
      transferTotal: 0,

      tranAccountList: null,
      tranAccountTotal: 0
    };
  }

  request = window.request;

  componentDidMount() {
    this.getCoinList();
    this.getRechargeList(1, '', '全部');
  }
  getCoinList = () => {
    this.request('/coin/list', {
      method: 'GET'
    }).then(json => {
      if (json.code === 10000000) {
        let myData = json.data.map(item => {
          const { id, name } = item;
          return { id, name };
        });
        myData.unshift({ id: '', name: '全部' });
        this.setState({ coinList: myData, symbol: '全部' });
      } else {
        message.error(json.msg);
      }
    });
  };

  getRechargeList = (page, coinId, symbol) => {
    let mSymbol = symbol === '全部' ? '' : symbol;
    let mCoinId = symbol === '全部' ? '' : coinId;
    this.request('/coin/deposit/list', {
      method: 'POST',
      body: {
        coinId: mCoinId,
        symbol: mSymbol,
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({
          rechargeList: json.data.list,
          rechargeTotal: json.data.count
        });
      } else {
        message.error(json.msg);
      }
    });
  };

  getWithdrawList = (page, coinId, symbol) => {
    let mSymbol = symbol === '全部' ? '' : symbol;
    let mCoinId = symbol === '全部' ? '' : coinId;
    this.request('/coin/withdraw/list ', {
      method: 'POST',
      body: {
        coinId: mCoinId,
        symbol: mSymbol,
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        let withdrawList = json.data.list.map((item, index) => {
          item.key = item.id;
          return item;
        });
        this.setState({ withdrawList, withdrawTotal: json.data.count });
      } else {
        message.error(json.msg);
      }
    });
  };

  getTransferList = (page, coinId, symbol) => {
    let mSymbol = symbol === '全部' ? '' : symbol;
    let mCoinId = symbol === '全部' ? '' : coinId;
    this.request('/offline/coin/transfer/list', {
      method: 'POST',
      body: {
        coinId: mCoinId,
        symbol: mSymbol,
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        let transferList = json.data.list.map(item => {
          item.key = item.id;
          return item;
        });
        this.setState({ transferList, transferTotal: json.data.count });
      } else {
        message.error(json.msg);
      }
    });
  };

  getTranAccountList = (page, coinId, symbol) => {
    let mCoinId = symbol === '全部' ? '' : coinId;
    this.request('/offline/change/myList', {
      method: 'POST',
      body: {
        coinId: mCoinId,
        currentPage: page,
        showCount: 10
      }
    }).then(json => {
      if (json.code === 10000000) {
        let tranAccountList = [];
        if (json.data.list) {
          tranAccountList = json.data.list.map(item => {
            item.key = item.id;
            return item;
          });
        }
        this.setState({ tranAccountList, tranAccountTotal: json.data.count });
      } else {
        message.error(json.msg);
      }
    });
  };

  tabChange = value => {
    this.setState({ symbol: '全部', currentTab: value, withdrawPage: 1 });
    if (value === 'recharge') {
      this.getRechargeList(1, '', '全部');
    } else if (value === 'withdraw') {
      this.getWithdrawList(1, '', '全部');
    } else if (value === 'transfer') {
      this.getTransferList(1, '', '全部');
    } else {
      this.getTranAccountList(1, '', '全部');
    }
  };

  // 取消
  cancelClick = record => {
    this.request(`/coin/volume/cancel/${record.id}`, {
      method: 'GET'
    }).then(json => {
      if (json.code === 10000000) {
        message.success(json.msg);
        const { coinList, symbol, withdrawPage } = this.state;
        const coinId = coinList.filter(item => {
          return item.name === symbol;
        })[0].id;
        this.getWithdrawList(withdrawPage, coinId, symbol);
      } else {
        message.destroy();
        message.error(json.msg);
      }
    });
  };

  // 提币记录 点击详情
  detailClick = record => {
    const { expendKey } = this.state;
    if (expendKey === record.id) {
      this.setState({ expendKey: '' });
    } else {
      this.setState({ expendKey: record.id });
    }
  };

  coinSelect = value => {
    const { currentTab, coinList } = this.state;
    const coinId = coinList.filter(item => {
      return item.name === value;
    })[0].id;

    this.setState({ symbol: value, withdrawPage: 1 });

    if (currentTab === 'recharge') {
      this.getRechargeList(1, coinId, value);
    } else if (currentTab === 'withdraw') {
      this.getWithdrawList(1, coinId, value);
    } else if (currentTab === 'transfer') {
      this.getTransferList(1, coinId, value);
    } else {
      this.getTranAccountList(1, coinId, value);
    }
  };

  rechargePageChange = page => {
    const { symbol, coinList } = this.state;
    const coinId = coinList.filter(item => {
      return item.name === symbol;
    })[0].id;
    ///coin/deposit/list
    this.getRechargeList(page, coinId, symbol);
  };

  withdrawPageChange = page => {
    const { symbol, coinList } = this.state;
    const coinId = coinList.filter(item => {
      return item.name === symbol;
    })[0].id;
    this.setState({ withdrawPage: page });
    ///coin/deposit/list
    this.getWithdrawList(page, coinId, symbol);
  };

  transferPageChange = page => {
    const { symbol, coinList } = this.state;
    const coinId = coinList.filter(item => {
      return item.name === symbol;
    })[0].id;
    ///coin/deposit/list
    this.getTransferList(page, coinId, symbol);
  };

  tranAccountPageChange = page => {
    const { symbol, coinList } = this.state;
    const coinId = coinList.filter(item => {
      return item.name === symbol;
    })[0].id;
    ///coin/deposit/list
    this.getTranAccountList(page, coinId, symbol);
  };

  render() {
    const rechargeColumns = [
      {
        align: 'center',
        title: '时间',
        dataIndex: 'createDate',
        key: 'createDate',
        render: text => {
          return <div>{stampToDate(text * 1)}</div>;
        }
      },
      {
        align: 'center',
        title: '币种',
        dataIndex: 'coinSymbol',
        key: 'coinSymbol'
      },
      {
        align: 'center',
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        render: () => {
          return <div>充币</div>;
        }
      },
      {
        align: 'center',
        title: '数量',
        dataIndex: 'volume',
        key: 'volume',
        render: text => {
          return <div>{Number(text).toFixed(8)}</div>;
        }
      },
      {
        align: 'center',
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: text => {
          if (text == 0) {
            return <div>确认中</div>;
          } else if (text == 1) {
            return <div>已成功</div>;
          } else {
            return <div>{text}</div>;
          }
        }
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'address',
        key: 'address',
        render: () => {
          return <div>操作</div>;
        }
      }
    ];
    const withdrowColumns = [
      {
        align: 'center',
        title: '时间',
        dataIndex: 'createDate',
        key: 'createDate',
        render: text => {
          return <div>{stampToDate(text * 1)}</div>;
        }
      },
      {
        align: 'center',
        title: '币种',
        dataIndex: 'coinSymbol',
        key: 'coinSymbol'
      },
      {
        align: 'center',
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        render: () => {
          return <div>提现</div>;
        }
      },
      {
        align: 'center',
        title: '数量',
        dataIndex: 'volume',
        key: 'volume',
        render: text => {
          return <div>{Number(text).toFixed(8)}</div>;
        }
      },
      {
        align: 'center',
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          let myNote = '';
          switch (text) {
            case 0:
              myNote = (
                <Button
                  type="primary"
                  onClick={() => {
                    this.cancelClick(record);
                  }}
                >
                  取消
                </Button>
              );
              break;
            case 1:
              myNote = '审核通过';
              break;
            case 2:
              myNote = '审核不通过';
              break;
            case 3:
              myNote = '已汇出';
              break;
            case 8:
              myNote = '预处理';
              break;
            case 9:
              myNote = '已取消';
              break;
            default:
          }
          return <div>{myNote}</div>;
        }
      },
      {
        align: 'center',
        title: '操作',
        dataIndex: 'updateDate',
        key: 'updateDate',
        render: (text, record) => {
          return (
            <div
              onClick={() => {
                this.detailClick(record);
              }}
              style={{ cursor: 'pointer', color: '#d4a668' }}
            >
              详情
            </div>
          );
        }
      }
    ];
    const transferColumns = [
      {
        align: 'center',
        title: '时间',
        dataIndex: 'createDate',
        key: 'createDate',
        render: text => {
          return <div>{stampToDate(text * 1)}</div>;
        }
      },
      {
        align: 'center',
        title: '币种',
        dataIndex: 'coinSymbol',
        key: 'coinSymbol'
      },
      {
        align: 'center',
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        render: text => {
          const textMap = {
            0: '常规账户转入到c2c',
            1: 'c2c转入到常规账户',
            3: 'c2c转入到手续费预备金',
            4: '手续费预备金转入到c2c',
            5: '常规账户转入到手续费预备金',
            6: '手续费预备金转入到常规账户',
            7: '注册抽奖所得',
            8: '推荐的会员注册抽奖奖励'
          };

          return <div>{textMap[text]}</div>;
        }
      },
      {
        align: 'center',
        title: '数量',
        dataIndex: 'volume',
        key: 'volume',
        render: text => {
          return <div>{Number(text).toFixed(8)}</div>;
        }
      },
      {
        align: 'center',
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: () => {
          return <div>成功</div>;
        }
      }
    ];

    const accountColumns = [
      {
        align: 'center',
        title: '单号',
        dataIndex: 'changeNo',
        key: 'changeNo'
      },
      {
        align: 'center',
        title: '时间',
        dataIndex: 'createDate',
        key: 'createDate',
        render: text => {
          return <div>{stampToDate(text * 1)}</div>;
        }
      },
      {
        align: 'center',
        title: '币种',
        dataIndex: 'coinSymbol',
        key: 'coinSymbol'
      },
      {
        align: 'center',
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        render: text => {
          const textMap = {
            0: '转入',
            1: '转出',
            2: '红包支出',
            3: '红包收入',
            4: '红包退回'
          };
          return <div>{textMap[text]}</div>;
        }
      },
      {
        align: 'center',
        title: '数量',
        dataIndex: 'volume',
        key: 'volume'
      },
      {
        align: 'center',
        title: '手续费',
        dataIndex: 'fee',
        key: 'fee'
      },
      {
        align: 'center',
        title: '对方账号',
        dataIndex: 'otherAccount',
        key: 'otherAccount'
      },
      {
        align: 'center',
        title: '对方姓名',
        dataIndex: 'otherRealName',
        key: 'otherRealName'
      },
      {
        align: 'center',
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: () => {
          return <div>成功</div>;
        }
      }
    ];

    const {
      symbol,
      coinList,
      currentTab,
      rechargeList,
      rechargeTotal,
      withdrawList,
      withdrawPage,
      withdrawTotal,
      transferList,
      transferTotal,
      expendKey,
      tranAccountList,
      tranAccountTotal
    } = this.state;
    return (
      <ul className="finance-content user-cont">
        <Tabs
          value={currentTab}
          tabBarExtraContent={
            <Select style={{ width: 100 }} value={symbol} onChange={this.coinSelect}>
              {coinList.map(item => {
                return (
                  <Option key={item.id} value={item.name}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          }
          onChange={this.tabChange}
        >
          <TabPane tab="充币记录" key="recharge">
            <Table
              dataSource={rechargeList}
              loading={!rechargeList}
              columns={rechargeColumns}
              pagination={{
                defaultCurrent: 1,
                total: rechargeTotal,
                pageSize: 10,
                onChange: page => {
                  this.rechargePageChange(page);
                }
              }}
            />
          </TabPane>
          <TabPane tab="提币记录" key="withdraw">
            <Table
              dataSource={withdrawList}
              columns={withdrowColumns}
              loading={!withdrawList}
              pagination={{
                defaultCurrent: 1,
                current: withdrawPage,
                total: withdrawTotal,
                pageSize: 10,
                onChange: page => {
                  this.withdrawPageChange(page);
                }
              }}
              expandedRowKeys={[expendKey]}
              expandedRowRender={record => {
                let { updateDate, fee, address, txId } = record;

                return (
                  <ul className="withdraw-expend">
                    <li>
                      <div>
                        {' '}
                        <span className="title">钱包处理时间 : </span>
                        {updateDate && stampToDate(updateDate * 1)}
                      </div>
                      <div>
                        {' '}
                        <span className="title">手续费 : </span>
                        {(fee * 1).toFixed(8)}
                      </div>
                    </li>
                    <li>
                      <div>
                        {' '}
                        <span className="title">提币地址 :</span>
                        {address}
                      </div>
                      <div>
                        {' '}
                        <span className="title">区块链交易ID : </span>
                        {txId}
                      </div>
                    </li>
                  </ul>
                );
              }}
            />
          </TabPane>
          <TabPane tab="划转记录" key="transfer">
            <Table
              dataSource={transferList}
              columns={transferColumns}
              loading={!transferList}
              pagination={{
                defaultCurrent: 1,
                total: transferTotal,
                pageSize: 10,
                onChange: page => {
                  this.transferPageChange(page);
                }
              }}
            />
          </TabPane>
          <TabPane tab="转账记录" key="tranAccount">
            <Table
              dataSource={tranAccountList}
              columns={accountColumns}
              loading={!tranAccountList}
              pagination={{
                defaultCurrent: 1,
                total: tranAccountTotal,
                pageSize: 10,
                onChange: page => {
                  this.tranAccountPageChange(page);
                }
              }}
            />
          </TabPane>
        </Tabs>
      </ul>
    );
  }
}
export default Finance;
